<template>
	<view class="_pos-rel container-page">
	<!-- 	<view class=" _w-max _top _left _z-index-2 _pos-fixed _top _left theme-color-bg" :style="'opacity:'+srollOpacity+';'">
			<view class="_w-max"  :style="{height:recHeight}"></view>
			<view class="_w-max  _font-16 _pad-x-15 _b _flex-row-mid" style="height: 88rpx;">{{sysConfig.routine_name}}</view>
		</view> -->
		<!-- 轮播 -->
		<swiper class="_w-max custom_banner _h-220"  :autoplay="true" indicator-dots :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<navigator class="_w-max _h-max" hover-class="none" :url="item.link">
				  <image class="_w-max _h-max"  :src="item.img"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="_pad-x-15 _pos-rel _z-index-1" style="margin-top: -92rpx;">
			<view class="center_box">
				<view class="_flex-row-bet _pad-bottom-10 _border-bottom">
					<view class="_flex-row _flex-1">
						<view class="_mar-right-24">
							<view class="_mar-bottom-10 _font-16 _grey-99">取车城市</view>
							<view class="selection" @click="changeCity(1,'取车城市')">
								{{area.city_name?area.city_name:'请选择城市'}}
								<image class="selection_icon" src="https://taxi.raxan.xyz/wechat/static/images/icon-arrow-down.png" mode=""></image>
							</view>
						</view>
						<view class="_flex-1">
							<view class="_mar-bottom-10 _font-16 _grey-99">当前位置</view>
							<view class="selection" @click="changeArea(1,'取车地点')">
								{{area.area_name? area.area_name : '请选择地点'}}
								<image class="selection_icon" src="https://taxi.raxan.xyz/wechat/static/images/icon-point-block.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="_pad-y-10 _border-bottom" v-if="is_other_places">
					<view class="_flex-row _flex-1">
						<view class="_mar-right-30">
							<view class="_mar-bottom-10 _font-12 _grey-99">还车城市</view>
							<view class="_font-18 _b _flex-row-mid" @click="changeCity(2,'还车城市')">
								{{area.black_city_name?area.black_city_name:'请选择城市'}}
								<text class="_mar-left-5 iconfont icon-xiangxia" style="font-size: 20rpx;"></text>
							</view>
						</view>
						<view class="_flex-1">
							<view class="_mar-bottom-10 _font-12 _grey-99">还车地点</view>
							<view class="_font-18 _b _flex-row-mid" @click="changeArea(2,'还车地点')" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
								{{area.black_area_name?area.black_area_name:'请选择地点'}}
								<text class="_mar-left-5 iconfont icon-xiangxia" style="font-size: 20rpx;"></text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="select-time _flex-row-mid _mar-bottom-16">
					<view class="_flex-col-mid _pad-y-10" @click="showTimePicker(0)">
						<!-- <view class="_b _font-15 _mar-bottom-5">取车时间</view> -->
						<view class="_b _font-15 _mar-bottom-5">{{DateTime.starMon||0}} 月 {{DateTime.starDay||0}} 日</view>
						<view class="_font-14" style="color: rgba(0,0,0,0.9)">{{formatWeekAndTime('start')}}</view>
					</view>
					<view class="_flex-1 _flex-col-mid" style="align-self: center;">
						<view class="_font-14 _border-bottom" style="padding-bottom: 18rpx;color: rgba(0,0,0,0.9)">共{{DateTime.days}}</view>
					</view>
					<view class="_flex-col-mid _pad-y-15" @click="showTimePicker(1)">
						<!-- <view class="_b _font-15 _mar-bottom-5">还车时间</view> -->
						<view class="_b _font-15 _mar-bottom-5">{{DateTime.endMon||0}} 月 {{DateTime.endDay||0}} 日</view>
						<view class="_font-14" style="color: rgba(0,0,0,0.9)">{{formatWeekAndTime('end')}}</view>
					</view>
				</view>
				<!-- <view class="_flex-row-mid _pad-y-15 _font-13">
					<radio :checked="is_visit" @click="visit()" /><text class="_pad-right-5">上门送取车</text> <text class="btn-tips">需提前两小时预定</text>
				</view> -->
				<view class="_w-max _mar-bottom-10 _text-center _font-16 ">
					<view @click="toChooseCar(DateTime)" class="_w-max theme-color-bg  _pad-y-10" style="border-radius: 12rpx;color: #FFFFFF;">立即选车</view>
				</view>
				<!-- <view class="_flex-row-center-mid _font-13">
					<button open-type="contact">
						<text class="_grey-99 _mar-left-5" style="font-size: 32rpx"> 24小时客服 为您解忧</text>
					</button>
				</view> -->
        <view class="only_filter">
          <view class="text">只看</view>
          <label class="radio" @click="checkVehConf('is_store_take')">
            <radio :checked="vehModeConf.is_store_take === 1" />门店自取
          </label>
          <label class="radio" @click="checkVehConf('is_door_take')">
            <radio :checked="vehModeConf.is_door_take === 1" />送车上门
          </label>
          <label class="radio" @click="checkVehConf('is_free')">
            <radio :checked="vehModeConf.is_free === 1" />免押金
          </label>
        </view>
			</view>
			<view class="sub_nav">
				<view v-for="item in navList" :key="item.label" class="sub_nav_item" @tap="handleNav(item)">
					<image class="sub_nav_item_icon" :src="item.icon" mode=""></image>
					<view class="sub_nav_item_label">{{ item.label }}</view>
				</view>
				  
			</view>
			  
			<!-- <view class="_w-max _white-bg _pad-15 _flex-row _mar-y-10" style="border-radius: 16rpx;">
				<navigator :url="`/pages/car_sub/article/index?id=4`" class="_flex-col-mid _flex-1">
					<image class="_w-25 _h-25 _mar-bottom-10" src="https://taxi.raxan.xyz/wechat/static/images/car/car-img-2.png" mode=""></image>
					<view class="_font-14">免押租车</view>
				</navigator>
				<navigator :url="`/pages/car_sub/article/index?id=1`" class="_flex-col-mid _flex-1">
					<image class="_w-25 _h-25 _mar-bottom-10" src="https://taxi.raxan.xyz/wechat/static/images/car/car-img-3.png" mode=""></image>
					<view class="_font-14">预订指南</view>
				</navigator>
				<navigator url="/pages/car_sub/auth/fill_info" class="_flex-col-mid _flex-1">
					<image class="_w-25 _h-25 _mar-bottom-10" src="https://taxi.raxan.xyz/wechat/static/images/car/car-img-4.png" mode=""></image>
					<view class="_font-14">租车资质</view>
				</navigator>
				<button class="_flex-col-mid _flex-1" open-type="contact">
					<image class="_w-25 _h-25 _mar-bottom-10" src="https://taxi.raxan.xyz/wechat/static/images/car/car-img-5.png" mode=""></image>
					<view class="_font-14">联系客服</view>
				</button>
			</view> -->
			
			<!-- <view class="_w-max _flex-row-mid">
				<navigator class="_flex-1 _mar-right-10  _h-75 _pos-rel _pad-15" url="/pages/car_sub/reservation/index?type_id=1">
					<image class="_w-max _h-max _pos-abs _top _left" style="border-radius: 16rpx;" :src="sysConfig.apply_banner_one" mode=""></image>
					<view class="_pos-rel _z-index-1">
						<view class="_font-15 _b _mar-bottom-5">{{sysConfig.max_banner_one_title}}</view>
						<view class="_font-12 _grey-99">{{sysConfig.min_banner_one_title}}</view>
					</view>
				</navigator>
				<navigator class="_flex-1  _h-75 _pos-rel _pad-15" url="/pages/car_sub/reservation/index?type_id=3">
					<image class="_w-max _h-max _pos-abs _top _left" style="border-radius: 16rpx;" :src="sysConfig.apply_banner_two" mode=""></image>
					<view class="_pos-rel _z-index-1">
						<view class="_font-15 _b _mar-bottom-5">{{sysConfig.max_banner_two_title}}</view>
						<view class="_font-12 _grey-99">{{sysConfig.min_banner_two_title}}</view>
					</view>
				</navigator>
			</view> -->
			<!-- 租车优惠卷 -->
			<!-- <view class="_w-max _mar-top-10 _white-bg">
				<view class="_pad-15 _w-max _flex-row-bet-mid" style="background: linear-gradient(90deg,rgba(255,232,221,1),rgba(255,232,221,0.2));">
					<image class="_w-120 _h-20" src="https://uxcar.uxphp.net/uploads/attach/2023/07/20230731/c2ce17c8ad75a3e2f055391c626ab20c.png" mode=""></image>
					<navigator hover-class="none" url="/pages/users/user_get_coupon/index" class="_flex-row-mid _font-12 _pad-5" style="color: #FF7029;">
						<view>查看更多</view>
						<view class="_mar-left-5 iconfont icon-xiangyou" style="font-size: 24rpx;"></view>
					</navigator>
				</view>
				<scroll-view scroll-x="true"  class="_over-hid _w-max" @scrolltolower="getCouponList">
					<view class="_w-max _pad-15 _flex-row">
						<view @click="getCoupon(item.id, index,item.receive_limit,item.is_use)" v-for="(item,index) in couponList" :key="index" class=" _pad-y-10 _pad-x-5 _flex-row-center-mid _mar-right-10" :class="item.is_use >= item.receive_limit ? 'coupon-item-had':'coupon-item'" v-if="item.is_use===0">
							<view class="_w-10 _h-10 _white-bg _z-index-1 _pos-abs _border-circle" style="left: -10rpx;"></view>
							<view class="_w-10 _h-10 _white-bg _z-index-1 _pos-abs _border-circle" style="right: -10rpx;"></view>
							<view class="_flex-col-mid _w-80">
								<view><span class="_font-12">￥</span><span class="_b _font-18">{{item.coupon_price}}</span></view>
								<view class="_font-12 _grey-99">{{item.coupon_title}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view> -->

			  
			<!-- 推荐车型 -->
			<!-- <view class="_pad-15 _white-bg _mar-top-10" style="border-radius: 20rpx; display: inline-block;">
				<view class="_font-18 _mar-bottom-15">
					<text class="_b">热门租车列表</text>
				</view>
				<view class="_w-max  _column-box-two">
					<view @click="toChooseCar(DateTime)" v-for="(item,index) in reTypeList.carRecommend" :key="index"  class="item  _pad-top-20 _pos-rel" style="border-radius: 20rpx;border: 1px solid #F2F2F2"  hover-class="none">
						<view v-if="index==0" class="_w-55 _h-20 _font-12 _b _flex-row-center-mid _text-center _pos-abs _left _top theme-color-bg" style="border-radius: 0 0 30rpx 0;">TOP 1</view>
						<view class="_w-max _flex-row-center-mid _pad-x-10"><image class="_w-130 _h-80" style="margin: 0 auto;" :src="item.pic"></image></view>
						<view class="_pad-x-10 _pad-bottom-10" :class="index ==0?'column-bg':''">
							<view class="_pad-bottom-5 _pad-top-25 _line-1 _b _font-15">{{ item.type_name }}</view>
							<view class="_pad-bottom-10 _font-12 _grey-99">{{item.gear=='auto'?'自动挡':'手动挡'}}·{{item.seat_num}}座·{{item.power}}</view>
							<view class="_font-16 _pad-bottom-5" style="color: #F03838;">￥{{ item.price }} <text class="_font-12">/天</text> </view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="_pad-y-20 _flex-row-center-mid ">
				<image v-if="sysConfig.is_bottom_img_car == 1" class="_w-240 _h-15" :src="sysConfig.bottom_img_car" mode=""></image>
			</view> -->
			<!-- <view class="_flex-row-bet-mid _font-12 _pad-bottom-20 _pad-x-10">
				<view class="_flex-row-mid">
					<image class="_w-25 _h-25 _mar-right-5" src="https://taxi.raxan.xyz/wechat/static/images/my/index-ico-1.png" mode=""></image>
					<view class="">
						<view class="">低价实惠</view>
						<view class="_grey-99">租车价格低</view>
					</view>
				</view>
				<view class="_flex-row-mid">
					<image class="_w-25 _h-25 _mar-right-5" src="https://taxi.raxan.xyz/wechat/static/images/my/index-ico-2.png" mode=""></image>
					<view class="">
						<view class="">交易保障</view>
						<view class="_grey-99">保障您的权益</view>
					</view>
				</view>
				<view class="_flex-row-mid">
					<image class="_w-25 _h-25 _mar-right-5" src="https://taxi.raxan.xyz/wechat/static/images/my/index-ico-3.png" mode=""></image>
					<view class="">
						<view class="">送车上门</view>
						<view class="_grey-99">省时省心出行</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="recommend-box">
			<view class="recommend-top_bg"></view>
			<view class="recommend-container">
				<view class="recommend-head">
					<image class="recommend-head-left" src="https://taxi.raxan.xyz/wechat/static/images/recommend.png" mode=""></image>
					<view class="recommend-head-right" @click="toChooseCar(DateTime)">
						更多车型
						<image src="https://taxi.raxan.xyz/wechat/static/images/more_model.png" style="width: 32rpx; height: 32rpx;flex: 0 0 32rpx" mode=""></image>
					</view>
				</view>
				<view class="recommend_wrapper" style="margin-top: -24rpx;">
					<view @click="toChooseDetailCar(item, DateTime)" v-for="(item,index) in reTypeList.carRecommend" :key="index"  class="recommend_item"  hover-class="none">
						<view class="veh_logo">
							<image class="veh_logo_img" :src="item.pic"></image>
						</view>
						<view style="padding: 24rpx 28rpx 28rpx 28rpx;">
							<view class="veh_type_name">{{ item.type_name }}</view>
							<view class="veh_params">{{item.seat_num}}座/{{item.power}}/{{item.gear=='auto'?'自动挡':'手动挡'}}</view>
							<view class="veh_price">日租：<view style="color: #FF5700;">{{ item.price }}元</view></view>
							<view class="veh_hire">立即租车</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="position: fixed;bottom: 12%;right: 30rpx;z-index: 10;text-align: center;display: grid;place-items: center;">
			<button open-type="contact" class="_flex-row-center-mid theme-color-bg" style="width: 98rpx;height: 98rpx;border-radius: 60rpx; position: relative; z-index: 1;">
				<view class="iconfont icon-kefu1" style="font-size: 52rpx;"></view>
			</button> -->
			<!-- <view style="background-color: #ffffff;border-radius: 20rpx;border: 1px solid #565556;margin-top: -40rpx;position: relative; z-index: 2;">联系客服</view> -->
		<!-- </view> -->
		<timePicker ref="timePicker" @getTime='getTime'></timePicker>
	</view>
</template>

<script>
	import timePicker from '@/pages/car_index/handler/timePicker.vue';
	import { getAllCity, getAllPlace, getReTypeList, disposeTime,getclientConfig, isCityOpen } from '@/api/car.js'
	import { getCoupons, setCouponReceive } from '@/api/api.js';
	import { mapGetters } from 'vuex';
	import {HTTP_REQUEST_URL} from '@/config/app';
	// import { toLogin, checkLogin } from '@/libs/login.js'
	export default{
		components:{
			timePicker
		},
		data(){
			return{
        vehModeConf: {
          is_store_take: 0, // 	是否门店自取
          is_door_take: 0, // 是否上门取车
          is_free: 0
        },
				navList: [
					{
            id: 1,
						icon: "https://taxi.raxan.xyz/wechat/static/images/b-cztc.png",
						label: "超值套餐",
            path: "/pages/setmenu/index"
					},
					{
            id: 2,
						icon: "https://taxi.raxan.xyz/wechat/static/images/b-yhq.png",
						label: "优惠券",
            path: "/pages/users/user_coupon/index"
					},
					{
            id: 3,
						icon: "https://taxi.raxan.xyz/wechat/static/images/b-qdjf.png",
						label: "签到积分",
             path: "/pages/users/sign_in_integral/index"
					},
					{
            id: 4,
						icon: "https://taxi.raxan.xyz/wechat/static/images/b-xshd.png",
						label: "限时活动",
            path: '/xshd'
					},
				],
				recHeight: '',//状态栏高度
				srollOpacity:0,// 头部导航栏透明度
				
				is_other_places:false, //是否异店还车
				is_visit:false,//是否上门送取车
				area_list:[],//取车地点列表
				black_area_list:[],//还车地点列表
				city_list:[],//市列表
				reTypeList:[],//推荐车型列表
				//省、市
				area:{
					area_id:0,
					area_name:'',
					city_id:0,
					city_name:'',
					latitude:0,
					longitude:0,
					
					black_area_id:0,
					black_area_name:'',
					black_city_id:0,
					black_city_name:'',
					black_latitude: 0,
					black_longitude: 0,
				},
				bannerList:[],
				carAdvertisingCarousel:[],
				DateTime:{
					days:'1天', //两日期相差的天数
					day:0,//天数
					hour:0,//小时数
					starStamp:null,//取车时间（时间戳）
					endStamp:null,//还车时间（时间戳）
					starMon:null, //取车月份
					endMon:null,//还车月份
					starDay:null, //取车日
					endDay:null,//还车日
					starTime:null,//取车时间
					endTime:null,//还车时间
					end_time:'',//还车时间日期列表
					start_time:'',//取车时间日期列表
				},
				sysConfig:{},
				couponList:[],
				is_claimable: false, // 是否有可领取的优惠卷
				couponFrom:{
					page: 1,
					limit: 8,
					type: 0
				}
			};
		},
		computed: mapGetters(['isLogin']), 
		onPageScroll(e){
			this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ?'0.0' + Math.floor(e.scrollTop) : e.scrollTop;
		},
		onLoad(){
			this.getPhoneInfo();
			this.getReTypeList();
			this.getCurDate();
			this.getclientConfig();
		},
		onShow(){
			if(this.isLogin){
				this.getCouponList();
			}
		},
		onShareAppMessage() {
			
		},
		methods:{
      abc() {
        console.log("ABC")
      },
      toCarByRecommend(data, date, param) {
        const params = {
          id: data.id,
          day: date.differ_day,
          start_time: param.starStamp,
          end_time: param.endStamp,
          color_id: '',
          appearance_id: '',
          place_id: data.place_id,
          is_door_take: param.is_door_take,
          is_take_service: param.is_visit,
          take_city_id: param.city_id,
          take_place_id: param.area_id,
          take_title: param.area_name,
          take_latitude: param.take_latitude,
          take_longitude: param.take_longitude,
          return_city_id: param.black_city_id,
          return_place_id: param.black_area_id,
          return_title: param.black_area_name,
          return_latitude: param.black_latitude,
          return_longitude: param.black_longitude,
          coupon_user_id: ''
        }
        console.log(params)
        uni.navigateTo({
          url: '/pages/car_sub/detail/index?params='
            + JSON.stringify(params)
            + '&date=' + JSON.stringify(date)
            + '&timeset=' + JSON.stringify(param)
        })
      },
      toChooseDetailCar(data, param){
        console.log(data, param)
				if(!this.area.city_name) return uni.showToast({title:'请选择取车城市',icon:'none'})
				if(!this.area.area_name) return uni.showToast({title:'请选择取车地点',icon:'none'})
        param.areaInfo = {...this.area};
				param.city_id = param.black_city_id = this.area.city_id ;
				param.area_id = param.black_area_id = this.area.area_id ;
				param.city_name = param.black_city_name = this.area.city_name ;
				param.area_name = param.black_area_name = this.area.area_name ;
				param.is_other_places = this.is_other_places;
				if(this.is_other_places){
					if(!this.area.black_city_name) return uni.showToast({title:'请选择还车城市',icon:'none'})
					if(!this.area.black_area_name) return uni.showToast({title:'请选择还车地点',icon:'none'})
					param.black_city_id = this.area.black_city_id ;
					param.black_area_id = this.area.black_area_id ;
					param.black_city_name = this.area.black_city_name ;
					param.black_area_name = this.area.black_area_name ;
				}
        const vehModeConf = this.vehModeConf;
				param = { ...param, ...vehModeConf };
				param.is_visit = this.is_visit;
				if(!this.is_visit){
					param.black_latitude = param.take_latitude =  this.area.latitude;
					param.black_longitude = param.take_longitude = this.area.longitude;
				}else{
					param.black_latitude = this.area.black_latitude ? this.area.black_latitude : '' ;
					param.black_longitude = this.area.black_longitude ? this.area.black_longitude : '' ;
					param.take_latitude = this.area.latitude ? this.area.latitude : '' ;
					param.take_longitude = this.area.longitude ? this.area.longitude : '' ;
				}
        const vm = this;
				disposeTime(param).then((res)=> {
          vm.toCarByRecommend(data, res.data, param);
				}).catch((err)=>{
					uni.showToast({title:err,icon:'none'})
				})
			},
      handleNav({path}){
        if (path === '/xshd') {
          return this.toChooseCar(this.DateTime);
        }
        if(path){
          uni.navigateTo({
            url: path
          })
        }
      },
      checkVehConf(type) {
        const value = this.vehModeConf[type];
        this.vehModeConf[type] = value === 0 ? 1 : 0;
      },
			formatWeekAndTime(type) {
				const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				const { starStamp, endStamp, starTime, endTime } = this.DateTime;
				const stamp = type === 'start' ? starStamp : endStamp;
				const date = new Date(stamp);
				const index = !stamp ? -1 : date.getDay();
				const time = (type === 'start' ? starTime : endTime) || '00:00';

				let r_week = index > -1 ? weekList[index] : '';
				const new_date = new Date();
				
				if (
					date.getFullYear() === new_date.getFullYear() &&
					date.getMonth() === new_date.getMonth() &&
					date.getDate() === new_date.getDate()
				) {
					r_week = '今日'
				}

				return `${r_week}${time}`;
			},
			getclientConfig(){
				var that = this;
				getclientConfig().then(res=>{
          const bannerList = [
            {
              id: 1048,
              img: res.data.apply_banner_one,
              link: "#",
            },
            {
              id: 1049,
              img: res.data.apply_banner_two,
              link: "#",
            }
          ]
					that.bannerList = bannerList;
					that.carAdvertisingCarousel = res.data.car_advertising_carousel;
					that.sysConfig = res.data;
				})
			},
			// 获取顶部高度信息
			getPhoneInfo(){
				let that = this;
				uni.getSystemInfo({
					success(res) {
						that.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
					}												
				});
			},
			// 修改是否异点还车
			changeSwitch(){
				this.area={
					area_id:0,
					area_name:'',
					city_id:0,
					city_name:'',
					black_area_id:0,
					black_area_name:'',
					black_city_id:0,
					black_city_name:'',
				}
				this.is_other_places = !this.is_other_places;
				this.is_visit = this.is_other_places;
				this.area.is_other_places = this.is_other_places;
				this.area.is_visit = this.is_visit;
			},
			visit(){
				this.is_visit = !this.is_visit;
				// this.is_other_places = this.is_visit?true:this.is_other_places;
				this.is_other_places = this.is_visit?true:false;
				this.area={
					area_id:0,
					area_name:'',
					city_id:0,
					city_name:'',
					black_area_id:0,
					black_area_name:'',
					black_city_id:0,
					black_city_name:'',
				}
				this.area.is_other_places = this.is_other_places;
				this.area.is_visit = this.is_visit;
			},
			//选择城市
			changeCity(type,title){
				let that = this;
				let param = {};
				param.title = title;
				// #ifdef MP-WEIXIN
				if(this.is_visit){
					wx.chooseLocation({
						success (res) {
							const address = res.address;
							let reg = /.+?(省|市|自治区|自治州|县|区)/g;
							let city = address.match(reg)[1];
							const name = res.name;
							const latitude = res.latitude; //纬度
							const longitude = res.longitude; //经度
							isCityOpen({city_name: city}).then((res)=>{
								if(type==1){// 选择取车城市、地点
									that.area.city_id = res.data.id
									that.area.city_name = city;
									that.area.area_name = name;
									that.area.latitude = latitude;
									that.area.longitude = longitude;
								}else{// 选择还车城市、地点
									that.area.black_city_id = res.data.id
									that.area.black_city_name = city;
									that.area.black_area_name = name;
									that.area.black_latitude = latitude;
									that.area.black_longitude = longitude;
								}
							}).catch((err)=>{
								return uni.showToast({ title:err, icon:'none' })
							})
						},fail(res){
							console.log(res)
						}
					})
					return;
				}
				//#endif
				uni.navigateTo({
					url:`/pages/car_sub/address_list/index?param=${JSON.stringify(param)}`,
					events:{
						getCity(option){
							if(type == 1){// 选择取车城市
								that.area.city_name = option.label;
								that.area.city_id = option.value;
								that.area.area_name = '';
								that.area.area_id = 0;
							}else{// 选择还车城市
								that.area.black_city_name = option.label;
								that.area.black_city_id = option.value;
								that.area.black_area_name = '';
								that.area.black_area_id = 0;
							}
							// uni.setStorageSync('ADDRESS',that.area)
						},
					},
				})
			},
			//选择地点
			changeArea(type,title){
				let that = this;
				let param = {};
				param.title = title;
				// #ifdef MP-WEIXIN
				if(this.is_visit){
					wx.chooseLocation({
						success (res) {
							const address = res.address;
							let reg = /.+?(省|市|自治区|自治州|县|区)/g;
							let city = address.match(reg)[1];
							const name = res.name;
							const latitude = res.latitude; //纬度
							const longitude = res.longitude; //经度
							isCityOpen({city_name: city}).then((res)=>{
								if(type==1){// 选择取车城市、地点
									that.area.city_name = city;
									that.area.area_name = name;
									that.area.area_id = 0;
									that.area.city_id = res.data.id;
									that.area.latitude = latitude;
									that.area.longitude = longitude;
								}else{// 选择还车城市、地点
									that.area.black_city_name = city;
									that.area.black_area_name = name;
									that.area.black_city_id = res.data.id;
									that.area.black_area_id = 0;
									that.area.black_latitude = latitude;
									that.area.black_longitude = longitude;					
								}
								that.area.is_other_places = that.is_other_places;
								that.area.is_visit = that.is_visit;
								uni.setStorageSync('ADDRESS',that.area)
							}).catch((err)=>{
								return uni.showToast({ title:err, icon:'none' })
							})
						}
					})
					return;
				}
				//#endif
				if(type == 1){
					if(!that.area.city_id) return uni.showToast({title:'请选择取车城市',icon:"none"})
					param.name = that.area.city_name;
					param.id = that.area.city_id;
				}else{
					if(!that.area.black_city_id) return uni.showToast({title:'请选择还车城市',icon:"none"})
					param.name = that.area.black_city_name;
					param.id = that.area.black_city_id;
				}
				uni.navigateTo({
					url:`/pages/car_sub/address_list/index?param=${JSON.stringify(param)}`,
					events:{
						getAddress(option){
							if(type == 1){// 选择取车城市
								that.area.area_name = option.title;
								that.area.area_id = option.id;
								that.area.latitude = option.latitude;
								that.area.longitude = option.longitude;
							}else{// 选择还车城市
								that.area.black_area_name = option.title;
								that.area.black_area_id = option.id;
								that.area.black_latitude = option.latitude;
								that.area.black_longitude = option.longitude;
							}
							that.area.is_other_places = that.is_other_places;
							that.area.is_visit = that.is_visit;
							uni.setStorageSync('ADDRESS',that.area)
						},
					},
				})
			},
			//展示取车、还车弹窗
			showTimePicker(type,nav_type){ // 0取车  1还车
				this.$refs.nav_type = nav_type;
				this.$refs.timePicker.picker_modal = true;
				this.$refs.timePicker.time_type = type;
				this.$refs.timePicker.getDay(210);
				this.$refs.timePicker.calTimes();
				if(this.DateTime.start_time){
					this.$refs.timePicker.start_time = this.DateTime.start_time;
					this.$refs.timePicker.end_time = this.DateTime.end_time;
				}
			},
			//获取取车、还车时间
			getTime(date){
				this.DateTime.start_time = date.starTime.starTime;
				this.DateTime.end_time = date.endTime.endTime;
				this.DateTime.starDay = date.starTime.date.date;
				this.DateTime.endDay = date.endTime.date.date;
				this.DateTime.starTime = date.starTime.time;
				this.DateTime.endTime = date.endTime.time;
				this.DateTime.starMon = date.starTime.date.month;
				this.DateTime.endMon = date.endTime.date.month;
				let endList = date.endTime.time.split(':');//分割时间
				this.DateTime.endStamp = new Date(date.endTime.date.year, (date.endTime.date.month-1), date.endTime.date.date).getTime();
				let starList = date.starTime.time.split(':');//分割时间
				this.DateTime.starStamp = new Date(date.starTime.date.year, (date.starTime.date.month-1), date.starTime.date.date).getTime();
				let diffDate = this.happenTimeFun(this.DateTime);
				this.DateTime.days = diffDate.value;
				this.DateTime.day = diffDate.day;
				this.DateTime.hour = diffDate.hour;
				this.$refs.timePicker.picker_modal = false;
			},
			// 立即选车
			toChooseCar(param){
				if(!this.area.city_name) return uni.showToast({title:'请选择取车城市',icon:'none'})
				if(!this.area.area_name) return uni.showToast({title:'请选择取车地点',icon:'none'})
        param.areaInfo = {...this.area};
				param.city_id = param.black_city_id = this.area.city_id ;
				param.area_id = param.black_area_id = this.area.area_id ;
				param.city_name = param.black_city_name = this.area.city_name ;
				param.area_name = param.black_area_name = this.area.area_name ;
				param.is_other_places = this.is_other_places;
				if(this.is_other_places){
					if(!this.area.black_city_name) return uni.showToast({title:'请选择还车城市',icon:'none'})
					if(!this.area.black_area_name) return uni.showToast({title:'请选择还车地点',icon:'none'})
					param.black_city_id = this.area.black_city_id ;
					param.black_area_id = this.area.black_area_id ;
					param.black_city_name = this.area.black_city_name ;
					param.black_area_name = this.area.black_area_name ;
				}
        const vehModeConf = this.vehModeConf;
				param = { ...param, ...vehModeConf };
				param.is_visit = this.is_visit;
				if(!this.is_visit){
					param.black_latitude = param.take_latitude =  this.area.latitude;
					param.black_longitude = param.take_longitude = this.area.longitude;
				}else{
					param.black_latitude = this.area.black_latitude ? this.area.black_latitude : '' ;
					param.black_longitude = this.area.black_longitude ? this.area.black_longitude : '' ;
					param.take_latitude = this.area.latitude ? this.area.latitude : '' ;
					param.take_longitude = this.area.longitude ? this.area.longitude : '' ;
				}

                

				disposeTime(param).then((res)=>{
					uni.navigateTo({
						url:`/pages/car_sub/car_list/index?param=${JSON.stringify(param)}&date=${JSON.stringify(res.data)}`
					})
				}).catch((err)=>{
					uni.showToast({title:err,icon:'none'})
				})
			},
			// 获取当天日期、时间
			getCurDate(){
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let curDay = date.getDate();
				let curHours = date.getHours();
				let curMin =  date.getMinutes();
				this.DateTime.starStamp = new Date(year,(month-1), curDay).getTime();
				this.DateTime.starMon = month < 10? '0'+month:month;
				this.DateTime.starDay = curDay< 10? '0'+curDay:curDay;
				if(curMin > 30) curHours = curHours+1;
				this.DateTime.starTime = this.DateTime.endTime = ( curHours < 10? '0' + curHours : curHours )+ ':' + ( curMin < 30 ? '30' : '00' );
				let tomDate = date.setDate(date.getDate()+1); //获取1天后的 时间戳
				let tom = new Date(tomDate);
				let tomYear = tom.getFullYear();
				let tomMon = tom.getMonth() + 1;
				let tomDay = tom.getDate();
				this.DateTime.endStamp = new Date(tomYear,(tomMon-1), tomDay).getTime();
				this.DateTime.endMon = tomMon < 10? '0'+tomMon:tomMon;
				this.DateTime.endDay = tomDay < 10? '0'+tomDay:tomDay;
			},
			// 获取推荐车型
			getReTypeList(){
				getReTypeList().then((res)=>{
					this.reTypeList = res.data;
				}).catch((err)=>{
					uni.showToast({ title:'推荐车型获取失败', icon:'none' })
				})
			},
			// 计算用车时间
			happenTimeFun(time){
				let star_date = new Date(time.starStamp);
				let end_date = new Date(time.endStamp);
				let star_year = star_date.getFullYear();
				let end_year = end_date.getFullYear();
				let star_month = star_date.getMonth() + 1;
				let end_month = end_date.getMonth() + 1;
				star_month = star_month < 10 ? ('0'+star_month) : star_month;
				end_month = end_month < 10 ? ('0'+end_month) : end_month;
				let star_day = star_date.getDate();
				let end_day = end_date.getDate();
				star_day = star_day < 10 ? ('0'+star_day) : star_day;
				end_day = end_day < 10 ? ('0'+end_day) : end_day;
				let star_time = star_year+'-'+star_month+'-'+star_day+' '+time.starTime+':00';
				let end_time = end_year+'-'+end_month+'-'+end_day+' '+time.endTime+':00';
				let star_timestamp = new Date(star_time).getTime()/1000;
				let end_timestamp = new Date(end_time).getTime()/1000;
				let difference = (end_timestamp - star_timestamp)/3600;
				let day = 0;
				let hour = 0;
				let sum = difference;
				for(let i = 0;i < difference; i++){
					if(sum >= 24){
						sum = sum - 24;
						day++;
					}else{
						hour = sum;
						break;
					}
				}
				if(hour > 0){
					if(day > 0){
						return {
							value:day+'天'+hour+'小时',
							day:day,
							hour:hour
						}
					}else{
						return {
							value:hour+'小时',
							day:day,
							hour:hour
						}
					}
				} else {
					return {
						value:day+'天',
						day:day,
						hour:hour
					}
				}
			},
			// 获取优惠卷列表
			getCouponList(){
				let that = this;
				let list = [];
				getCoupons(that.couponFrom).then(res => {
					list = res.data.list;
					if(list.length > 0){
						that.couponList = that.couponList.concat(list);
						that.couponFrom.page++
					}
					that.is_claimable = res.data.is_claimable;
				})
			},
			
			getCoupon(id, index,receive_limit,is_use){
				let that = this;
				let list = that.couponList;
				if(is_use >= receive_limit) return that.$util.Tips({title: that.$t(`请勿重复领取`)});
				//领取优惠券
				setCouponReceive(id).then(function(res) {
					list[index].is_use = list[index].is_use + 1;
					that.$set(that, 'couponList', list);
					that.$util.Tips({title: that.$t(`领取成功`)});
				}).catch(error => {
					return that.$util.Tips({title: error});
				})
			},
		},
	}
</script>

<style scoped lang="scss">
.container-page {
	color: rgba(0, 0, 0, 0.9);
}
.custom_banner {
	//未选中的指示点样式，支持h5、app
	/deep/ .uni-swiper-dot {
		width: 36rpx;
		height: 4rpx;
		border-radius: 0!important;
		background: #F1F4F5!important;
	}

	//选中的指示点样式，支持h5、app
	/deep/ .uni-swiper-dot-active {
		background: #366EF4!important;
	}

	//未选中的指示点样式，支持微信小程序
	/deep/ .wx-swiper-dot {
		width: 36rpx;
		height: 4rpx;
		border-radius: 0!important;
		background: #F1F4F5!important;
	}

	//选中的指示点样式，支持微信小程序
	/deep/ .wx-swiper-dot-active {
		background: #366EF4!important;
	}

	//指示点位置，支持h5、app
	/deep/ .uni-swiper-dots-horizontal {
		top: 324rpx !important;
		left: 64rpx !important;
		transform: translate(0%) !important;
		text-align: right;
		height: 0rpx;
	}

	//指示点位置，支持微信小程序
	/deep/ .wx-swiper-dots-horizontal {
		top: 324rpx !important;
		left: 64rpx !important;
		transform: translate(0%) !important;
		text-align: right;
		height: 0rpx;
	}
}

.only_filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24rpx;
  font-size: 28rpx;
  .text {
    color: rgba(0,0,0,0.4);
  }
}

.center_box {
	padding: 30rpx;
	border: 4rpx solid #FFFFFF;
	border-radius: 20rpx;
	background: linear-gradient(180deg, #FAFAFE 0%, #E7F6FE 100%);

	.selection {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 48rpx;
		font-size: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		justify-content: flex-start;
		color: rgba(0, 0, 0, 0.9);
		.selection_icon {
			flex: 0 0 32rpx;
			width: 32rpx;
			height: 32rpx;
			margin-left: 4rpx;
		}
	}

	.select-time {
		margin-top: 32rpx;
		padding: 0 40rpx;
		background: #FEFEFE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
}

.sub_nav {
	margin: 0 35rpx;
	margin-top: 20rpx;
	margin-bottom: 78rpx;
	display: flex;
	justify-content: space-between;
	.sub_nav_item {
		flex: 0 0 112rpx;
		width: 112rpx;
		height: 116rpx;
		font-size: 0rpx;
		color: rgba(0,0,0,0.9);
		text-align: center;
		.sub_nav_item_icon {
			width: 60rpx;
			height: 84rpx;
			padding: 12rpx 0;
		}
		.sub_nav_item_label {
			line-height: 44rpx;
			font-size: 28rpx;
		}
	}
}

.recommend-box {
	position: relative;
	.recommend-top_bg {
		left: 0;
		right: 0;
		top: 0;
		position: absolute;
		z-index: 0;
		height: 240rpx;
		background: linear-gradient( 180deg, #E8F7FF 0%, #F8F9FC 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		border: 2rpx solid #FFFFFF;
	}
	.recommend-container {
		position: relative;
		z-index: 1;
		padding: 32rpx;
		.recommend-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;
			.recommend-head-left {
				width: 168rpx;
				flex: 0 0 168rpx;
				height: 48rpx;
			}
			.recommend-head-right {
				width: 180rpx;
				box-sizing: border-box;
				padding: 0 16rpx;
				flex: 0 0 180rpx;
				line-height: 52rpx;
				background: #ECF8FF;
				border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
				border: 1px solid #E7E7E7;
				color: rgba(0,0,0,0.6);
				font-size: 28rpx;
				font-weight: 400;
				align-items: center;
				justify-content: center;
				display: flex;
			}
		}
		.recommend_wrapper {
			width: 100%;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			justify-content: space-between;
			.recommend_item {
				margin-top: 24rpx;
				flex: 0 0 calc(50% - 12rpx);
				background: #FFFFFF;
				border-radius: 16px 16px 16px 16px;
				overflow: hidden;
				.veh_logo {
					height: 160rpx;
					overflow: hidden;
					.veh_logo_img {
						width: 100%;
						height: 100%;
					}
				}
				.veh_type_name {
					line-height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: rgba(0,0,0,0.9);
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.veh_params {
					line-height: 40rpx;
					margin-top: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.veh_price {
					margin-top: 12rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					line-height: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(0,0,0,0.9);
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.veh_hire {
					margin-top: 12rpx;
					width: 130rpx;
					line-height: 46rpx;
					background: #008DFF;
					border-radius: 4px;
					text-align: center;
					color: #FFFFFF;
					font-size: 24rpx
				}
			}
		}

	}
}

.btn-tips{
	border-radius: 8rpx;
	padding:3rpx 5rpx;
	border:2rpx solid #F03838;
	color: #F03838;
	font-size: 22rpx;
}
.grid-nav{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
}
button::after{
	content: '';
	border: none;
}
.index-nav {
	width: 100%;
	// padding-left: 10rpx;
	// padding-right: 10rpx;
	margin-top: 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}


._column-box-two{
	display: inline-block;
	// display: flex;
	// flex-wrap: wrap;
	// justify-content: space-between;
	-moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari 和 Chrome */
	column-count:2;
	-moz-column-gap: 30rpx;
    -webkit-column-gap: 30rpx;
    column-gap: 30rpx;
	& .item{
		-webkit-column-break-inside: avoid;
		break-inside: avoid; /*防止断点*/
		width: 100%;
		margin: 25rpx 0;
	}
	
	
	& .item:nth-child(2n){
		float: right;
		height: 100%;
	}
	& .item:nth-child(2n-1){
		float: left;
		height: 420rpx;
	}
	& .item:nth-child(1){
		margin-top: 0;
	}
	
}
.column-bg{
	background-image: url('https://uxcar.uxphp.net/uploads/attach/2023/07/20230731/2c3b0e5a3f09cb437f5515419f8109b5.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

.coupon-item{
	border: 2rpx solid #FF7029;
	background-color: rgba(255, 112, 41, 0.1);
	color: #FF7029;
	position: relative;
	border-radius: 16rpx;
}

.coupon-item-had{
	border: 2rpx solid #999;
	background-color: rgba(0,0,0,0.1);
	color: #999;
	position: relative;
	border-radius: 16rpx;
}
</style>